<template>
  <tl-sub-page :render="render" :with-header="false" :visible.sync="visible" v-dialogDrag :title="title" :close-on-click-modal="false" class="tl-drawer" :size="size" @open="open" @close="close" :destroy-on-close="true" :modal-append-to-body="true" :close-on-press-escape="false" :append-to-body="true">
    <div class="project-container">
      <div class="customer-header">
        <div class="info">
          <img src="/static/images/paojectManager/mpmscore.png" class="logo" style="width: 55px;height: 55px">
          <div class="content" :title="model.projectname">
            <p>
              <b style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width: 52%;">{{ projectinfo.projectname }}</b>
            </p>
            <p class="light">
            </p>
          </div>
        </div>
        <div class="toolbar">
          <el-button type="danger" icon="el-icon-close" circle @click="doCancelEdit"></el-button>
        </div>
      </div>
      <div class="project-nav" :style="{ height: mainHeight + 'px' }">
        <ul class="nav-list" style="top:0px">
          <template v-for="item in navList">
            <li :key="item.code" v-if="item.show" :class="item.on ? 'on' : ''" @click="clickNav(item.code)" style="cursor: pointer;clear: both">
              <span style="float: left;width: 100px">{{ item.name }}</span>
              <span style="float: left;">
                <i v-if="item.count > 0">{{ item.count }}</i>
                <label v-if="item.flag">{{ item.flag }}</label>
              </span>
            </li>
          </template>
        </ul>
      </div>
      <!-- <el-row v-if="fromApproval === '1'">
      <el-col :span="24">
      </el-col>
    </el-row> -->
      <div class="project-main" :style="{ height: mainHeight + 'px' }">
        <el-scrollbar class="customer-main-container" id="customerMainContainer">
          <div style="padding:0 10px">
            <a id="scorebaseinfo" class="step-position">&nbsp;</a>
            <div>
              <div class="tl-form-line-title">评标详情
    </div>
    <el-form class="tl-form stakeholderForm" ref="form" :model="model" :disabled="true" :rules="rules" label-width="150px">
    <el-row>
        <el-col :span="24">
          <el-form-item label="评分项目（大类）" prop="scoringitem_big_catergory">
            <el-input v-model="scoreinfo.scoringitem_big_catergory"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    <el-row>
        <el-col :span="24">
          <el-form-item label="评分项目（小类）" prop="scoringitem_small_catergory">
            <el-input v-model="scoreinfo.scoringitem_small_catergory"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="评分细则" prop="scoringrubric">
            <el-input v-model="scoreinfo.scoringrubric" type="textarea" :rows="3" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="细则描述" prop="scoredescription">
            <el-input v-model="scoreinfo.scoredescription" type="textarea" :rows="3"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="满分" prop="fullscore">
            <el-input v-model="scoreinfo.fullscore"  oninput="this.value=this.value.match(/\d{0,}\.?\d{0,1}/)"></el-input>
            <span class="unitSpan">分</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="目标得分" prop="targetscore">
            <el-input v-model="scoreinfo.targetscore" oninput="this.value=this.value.match(/\d{0,}\.?\d{0,1}/)"></el-input>
            <span class="unitSpan">分</span>
          </el-form-item>
        </el-col>
        </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="自评分" prop="selfscore">
            <el-input v-model="scoreinfo.selfscore" oninput="this.value=this.value.match(/\d{0,}\.?\d{0,1}/)"></el-input>
            <span class="unitSpan">分</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分差" prop="scoregap">
            <el-input v-model="scoreinfo.scoregap" :disabled="true"></el-input>
            <span class="unitSpan">分</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="专家是否指导自评分" prop="isexpertguide">
            <el-select v-model="model.isexpertguide" filterable clearable>
              <el-option v-for="item in codeModel.enabledList" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item :label="'基于专家意见的差距分析'"  prop="gapanalysis">
            <el-input v-model="scoreinfo.gapanalysis" type="textarea" show-word-limit maxlength="1000" :rows="3"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="提分计划" prop="scoringplan">
            <el-input v-model="scoreinfo.scoringplan" type="textarea" show-word-limit maxlength="1000" :rows="3"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="责任人" prop="responsible">
            <tl-ref-stakeholder v-model="scoreinfo.responsible" :initDisplayData.sync="model.responsible" fieldKey="usercode" :externalSelectedRowKeys="model.responsiblecode" title="选择责任人"  :isSingleSelect="true"></tl-ref-stakeholder>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="计划完成日期" prop="planenddate">
            <el-date-picker v-model="scoreinfo.planenddate" type="date" placeholder="计划完成日期" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <a id="scorefeedinfo" class="step-position">&nbsp;</a>
      <div class="tl-form-line-title">进度反馈
    </div>
    <el-form class="tl-form stakeholderForm" ref="form1" :model="model" :disabled="true" :rules="rules" label-width="150px">
		<el-row>
			<el-col :span="24">
				<el-form-item label="进度更新" prop="completion" >
					<el-input v-model="model.completion" type="textarea" show-word-limit maxlength="1000" :rows="3"></el-input>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="12">
				<el-form-item label="本周提升分数" prop="improvescore" >
					<el-input v-model="model.improvescore" oninput="this.value=this.value.match(/\d{0,}\.?\d{0,1}/)"></el-input>
					<span class="unitSpan">分</span>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="完成得分" prop="completionscore" >
					<el-input v-model="model.completionscore" oninput="this.value=this.value.match(/\d{0,}\.?\d{0,1}/)"></el-input>
					<span class="unitSpan">分</span>
				</el-form-item>
			</el-col>
		</el-row>
    <el-row>
        <el-col :span="12">
          <el-form-item label="更新日期">
            <el-date-picker v-model="model.submitdate" type="date" value-format="yyyy-MM-dd" :disabled="true"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
				<el-form-item label="是否完成" prop="isfinishbidscore" :rules="rules.validateRequire">
						<el-select v-model="model.isfinishbidscore" filterable clearable :disabled="true">
							<el-option v-for="item in codeModel.isfinishbidscoreList" :key="item.code" :label="item.name" :value="item.code"/>
						</el-select>
				</el-form-item>
			</el-col>
      </el-row>
    </el-form>
    <a id="scorehisinfo" class="step-position">&nbsp;</a>
    <div v-if="feedbackList.length > 0" class="tl-form-line-title">历史反馈
    </div>
    <feed-back-his ref="feedbackhisref" :feedbackList="feedbackList"></feed-back-his>
 </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </tl-sub-page>
</template>

<script>
/** mixins */
import { mixin_approval_edit } from '@tapui/mixins/mixin_approval_edit'
/** 子组件 */
import TlRefStakeholder from '../mpmProjectStakeholder/refList'
import FeedBackHis from './feedBackHis'
/** 工具类 */
import { putAction, getAction, postAction, deleteAction } from '@tapui/utils/http'
import { formatDate } from '@tapui/utils/date'
/** VUE配置 */
export default {
  mixins: [mixin_approval_edit],
  components: { TlRefStakeholder, FeedBackHis },
  data() {
    return {
      moduleTitle: '评标细则信息表',
      urlPrefix: '/mpm/projectBidScoreFeedBack/',
      url: {
        // 额外的url
        queryScoreApprovalInfo: '/mpm/projectBidScoreFeedBack/queryScoreFeedBackApprovalInfo/',
        queryCodeList: '/mpm/projectBidScoreFeedBack/dataCodeList'
      },
      isdisbledtime: true,
      loading: true,
      projectinfo: {},
      scoreinfo: {},
      feedbackList: [],
      size: '95%',
      mainHeight: 100,
      visible: true,
      isshowline: false,
      navList: [
        { name: '评标详情', count: 0, flag: null, on: true, code: 'scorebaseinfo', show: true },
        { name: '进度反馈', count: 0, flag: null, on: true, code: 'scorefeedinfo', show: true },
        { name: '历史反馈', count: 0, flag: null, on: true, code: 'scorehisinfo', show: true }
      ]
    }
  },
  props: {
    render: {
      default: 'el-drawer',
      type: String
    }
  },
  methods: {
    resizeHandler() {
      this.mainHeight = document.body.getBoundingClientRect().height - 250
    },
    // 点击左侧导航
    clickNav(code) {
      this.navList.forEach((m) => {
        if (m.code === code) {
          m.on = true
        } else {
          m.on = false
        }
      })
      let element = document.getElementById(code)
      if (element === null) return
      let goY = element.getBoundingClientRect().y - 75
      this.mainScrollElement.scrollTop += goY
    },
     // 页面滚动时，动态改变左侧导航选中的元素
    onMainScroll() {
      this.mainScrollElement.addEventListener('scroll', () => {
        let currentTop = this.mainScrollElement.scrollTop
        let code = ''
        for (let element of document.getElementsByClassName('step-position')) {
          if (element.getBoundingClientRect().y >= 0) {
            code = element.id
            break
          }
        }
        this.navList.forEach((m) => {
          if (m.code === code) {
            m.on = true
          } else {
            m.on = false
          }
        })
      })
    },
    doCancelEdit() {
      this.visible = false
      this.$emit('close')
      this.$emit('refresh')
    },
    formatDate(date) {
      return formatDate(new Date(date ? date.toString().replace(/\-/g, "/") : date), "yyyy-MM-dd HH:mm")
    },
    queryScoreApprovalInfo() {
      return getAction(this.url.queryScoreApprovalInfo, { id: this.id }).then((res) => {
          if (res.success) {
            this.projectinfo = res.result.projectinfo
            this.scoreinfo = res.result.scoreinfo
            this.model = res.result.feedbackinfo
            this.feedbackList = res.result.feedbackList
            this.loading = false
            if (this.feedbackList.length === 0) {
              this.$set(this.navList[2], 'show', false)
            } else {
              this.$set(this.navList[2], 'show', true)
            }
          } else {
            this.$tap.alert(res.message, 'warning')
          }
        })
    },
    open() {
      this.navList.forEach(function(item, index) {
        if (index === 0) {
          item.on = true
        } else {
          item.on = false
        }
      })
      this.resizeHandler()
      this.$nextTick((_) => {
        this.queryScoreApprovalInfo()
      })
      this.$nextTick(() => {
        this.mainScrollElement = document.getElementById('customerMainContainer').getElementsByClassName('el-scrollbar__wrap')[0]
        this.onMainScroll()
      })
    }
  },
  created() {
      window.addEventListener('resize', this.resizeHandler)
    }
}
</script>
<style scoped lang="scss">
/deep/.el-drawer {
  padding: 0 15px;
}
/deep/ .el-drawer__body {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: auto;
  border-top: 1px solid rgb(232, 232, 232);
}
</style>
